<template>
  <div>
    <img class="wave" src="../assets/static/img/bg_register_wave.svg" alt="背景">
    <div class="container" id="register">

      <div class="img">
        <img src="../assets/static/img/bg_register_hezuo.svg">
      </div>
      <div class="login-content">
        <form>

          <img src="../assets/static/img/avatar_woman.svg" style="height: 100px;cursor: pointer" @click="join" alt="头像">

          <h2 class="title">欢迎加入</h2>
          <div class="input-div pass" >
            <div class="i">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="div">
              <h5 class="hint">用户名</h5>
              <input type="text" name="username" v-model="username" ref="usernameInput" @focus="add($event.target)" @blur="check($event.target)"  class="input" autocomplete="off" required>
            </div>
          </div>
          <div class="input-div pass">
            <div class="i">
              <i class="el-icon-s-grid"></i>
            </div>
            <div class="div">
              <h5 class="hint">密码</h5>
              <input type="password" name="password" v-model="password" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
            </div>
          </div>
          <div class="input-div pass">
            <div class="i">
              <i class="el-icon-s-unfold"></i>
            </div>
            <div class="div">
              <h5 class="hint">确认密码</h5>
              <input type="password" name="confirmPassword" v-model="confirmPassword" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
            </div>
          </div>

          <router-link to="/login">已有账号?</router-link>

          <input type="button" @click="register" class="btn" value="注 册">
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  import { registerReq, getUserByUsernameReq} from "@/api/user";

  export default ({
    name: 'Register',
    data() {
      return{
        username : '',
        password : '',
        confirmPassword : '',
        flag : false,//判断本次注册信息是否合法
      }
    },
    methods : {
      join(){
      },
      add(el){
        let parent = el.parentNode.parentNode;
        parent.classList.add("focus");
      },
      remove(el){

        let parent = el.parentNode.parentNode;
        if(el.value === ""){//为空时候不用判断位数
          parent.classList.remove("error");
          parent.classList.remove("focus");
          return false;
        }
        if (el.value.trim().length < 3){
          this.$message("不能少于5位！");
          parent.classList.add("error");
          return false;
        }else {
          parent.classList.remove("error");
        }
      },
      check(el){
        if (this.username.trim() === "" ){//username为空
          console.log("check空值")
          this.remove(el)
          return false;
        }else if (this.username.trim().length < 3){
          this.$message("用户名不能少于3位！");
          return false;
        } else{//username不为空
          let parent = el.parentNode.parentNode;

          getUserByUsernameReq({username: this.username}).then(response => {
            console.log(response)
            if (response.state === true) {
              this.flag = true
              parent.classList.remove("error");
              this.$notify.success({title: '成功',message: response.message, duration: 1500});
            }else{
              parent.classList.add("error");
              this.$notify.warning({title: '失败',message: response.message, duration: 1500});
            }
          })
        }
      },
      register(){
        if (this.username.trim() === "" || this.password.trim() === "" || this.confirmPassword.trim() === ""){
          this.$message("需要全部填写哦~");return false;
        }else if(this.password.length < 3 || this.confirmPassword.length < 3){
          this.$message("密码位数不能少于3位哦~~");return false;
        }else if(!this.flag){
          this.check(this.$refs.usernameInput);return false;
        }
        if (this.flag){
          if (this.password === this.confirmPassword){
            let data = {username : this.username, password : this.password,};
            registerReq({user: data}).then(response => {
              console.log(response)
              if (response.state === true) {
                this.flag = true
                //parent.classList.remove("error");
                this.$router.push("/login")
                this.$notify.success({title: '成功',message: response.message, duration: 1500});
              }else{
                //parent.classList.add("error");
                this.$notify.warning({title: '失败',message: response.message, duration: 1500});
              }
            })
          }else {
            this.$message({showClose: true, message: '密码不一致', type: 'warning'});return false;
          }
        }else {
          this.$message({showClose: true, message: '用户名重复', type: 'warning'});return false;
        }
      },
    },
    beforeMount (){//页面挂载之前
      /*消息弹窗全局配置*/
    },
    mounted(){//页面挂载之后
    },
  });


</script>

<style scoped>
  @import '../assets/static/css/commons.css';

  .wave{
    position: fixed;
    bottom: 0;
    left: 0;
    /*
    height: 100%;
    */
    z-index: -1;
  }
  .img{
    margin-bottom: 50px;
  }

  .input-div:before, .input-div:after{
    background-color: #66c7ef;
  }
  .focus.error.input-div:before,.focus.error.input-div:after{
    content: '';
    position: absolute;
    bottom: -2px;
    height: 2px;
    background-color: indianred;
    transition: .4s;
  }

  .input-div.focus > .i > i{
    color: #66c7ef;
  }
  .input-div.focus.error > .i > i{
    color: indianred;
  }

  a:hover{
    color: #66c7ef;
  }

  .btn{
    display: block;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    outline: none;
    border: none;
    background-image: linear-gradient(to right, #2cb9e2, #66c7ef, #2cb9e2);
    background-size: 200%;
    font-size: 1.2rem;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    margin: 1rem 0;
    cursor: pointer;
    transition: .5s;
  }
  .btn:hover{
    background-position: right;
  }

</style>
